<template id="Line">
	<div :id="id"  :style="chartStyle">
      <slot></slot> 
  </div>
</template>

<script>
    import defaultImange from "../img/bgBlue.png";
/**
 *@author 张馨月
 */
    export default {
      name: 'ATLine',
      data () {
        return {
          myChart:null,
        }
      },
      mounted(){
        this.$nextTick(function(){
          this.draw();
        })
      },
      watch:{
        xData(){
          this.draw()
        },
        // yData(){
        //   this.draw()
        // },
        seriesData(){
          this.draw()
        },
      },
      props:{
/**
 *@type {string} id 容纳echarts的div的id随机生成，生成一个随机字符串,纯英文的,当不传入ID的时候生成实例,加i确保不会随机到一样的
 */
        id:{
          type: String,
          default: function () {
            let temp = [];
            for (let i = 0; i < 6; i++) {
              let randomChar = String.fromCharCode(65 + Math.floor(Math.random() * 19) + i);
              temp.push(randomChar);

            }
            return temp.reduce((pre, next) => pre + next);
          }
        },
/**
 *@type {Array} xData x轴数据
 */
        xData:{
          type:Array,
          // require:true,
          default:[]
        },
        // yData:{
        //   type:Array,
        //   // required:true,
        //   default:[]
        // },
/**
 *@type {Array} seriesData 数据填充，形式{name:'',type:'line',data:[]}可多组
 */
        seriesData:{
          type:Array,
          // require:true,
          default:function(){
            return []
          }       
        },
        leftspace:{
          type:String,
          // require:true,
          default:'4%'
        },
        rightspace:{
          type:String,
          // require:true,
          default:'6%'
        },
        bottomspace:{
          type:String,
          // require:true,
          default:'3%'
        },
/**
 *@type {string} chartStyle 样式
 */
        chartStyle:{
          type:String,
          // required:true,
          default:"width:100%;height:100%;"
        },
        formatter:{
            // require:true,
            default:'<p style="color:#fff;margin-top:11px;margin-left:15px;">{b0}</p><p style="margin-left:10px;margin-right:10px;margin-top:-5px"><svg width="20px" height="20px" version="1.1"><circle cx="10" cy="15" r="4" stroke="#ef6565"stroke-width="2" fill="#ef6565"/></svg>{a0}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{c0}&nbsp;</p><p style="margin-left:10px;margin-top:-10px;margin-bottom:13px;margin-right:10px;"><svg width="20px" height="20px" version="1.1"><circle cx="10" cy="15" r="4" stroke="#a3ecd8"stroke-width="2" fill="#a3ecd8"/></svg>{a1}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{c1}&nbsp;</p>'
        },
        fileName: {
          type:String,
          default:"echarts"
        },
        toolboxRight:{
          type:String,
          default:'0px'
        },
        toolboxTop:{
          type:String,
          default:'55px'
        },
        // toolboxLeft:{
        //   type:String,
        //   default:'0px'
        // },
        itemColor:{
          type:Array,
          default:function(){
            return ["#ef6565","#a3ecd8"]
          }
        },
        showDownloadIcon:{
          type:Boolean,
          default:true
        },  
        tooltippadding:{
          default:function(){
            return [0,0,0,0]
          }
        } 
      },

      methods: {
        draw(){
            // let myChart = this.$echarts.init(document.getElementById(this.id))
            // 绘制图表
            if (document.getElementById(this.id)) {
              this.myChart = this.myChart==null ? this.$echarts.init(document.getElementById(this.id)):this.myChart
              this.myChart.setOption({
                  color:this.itemColor,
                  tooltip: {
                      padding:this.tooltippadding,
                      formatter:this.formatter,
                      trigger: 'axis',
                      backgroundColor:'rgba(50, 50, 50, 0.7)',
                      borderColor:'rgb(51, 51, 51)',
                      borderWidth:0,
                      textStyle:{
                          color:"#fff",
                          fontSize:12,
                          fontFamily: '宋体'
                      }
                  },
                  toolbox:{
                      right:this.toolboxRight,
                      top:this.toolboxTop,
                      // left:this.toolboxLeft,
                      show: this.showDownloadIcon,
                      iconStyle: {
                        normal:{
                          borderColor: '#5c6781'
                        },
                        emphasis:{
                          borderColor: '#4990ff'
                        }
                      },
                      orient: 'horizontal',
                      itemGap: 10,
                      itemSize:84,
                      showTitle: true,
                      feature: {
                          saveAsImage:{
                              show:true,
                              name: this.fileName,
                              title: ' ',
                              icon: 'image://'+defaultImange,
                          }    
                      }                    
                  },
                  grid: {
                      left: this.leftspace,
                      right: this.rightspace,
                      bottom: this.bottomspace,
                      containLabel: true
                  },
                  xAxis: {
                      type: 'category',
                      boundaryGap: false,
                      data: this.xData,
                      axisLine:{
                          lineStyle:{
                              color:'#dddde6',
                              width:1,//这里是为了突出显示加上的，可以去掉
                          }
                      },
                      axisLabel: {
                          show: true,
                          textStyle: {
                              color: '#758697',
                              fontFamily: '宋体'
                          }
                      }
                  },
                  yAxis: {
                      type: 'value',
                      splitLine: {
                            show: false
                      },
                      axisLine:{
                          lineStyle:{
                              color:'#dddde6',
                              width:1,//这里是为了突出显示加上的，可以去掉
                          }
                      },
                      axisLabel: {
                          show: true,
                          interval: 'auto',
                          textStyle: {
                              color: '#758697',
                              fontFamily: '宋体'
                          }
                      }
                  },
                  series: this.seriesData
                  // series : [{
                  //     name:this.seriesName,
                  //     type:'bar',
                  //     barWidth: '36px',
                  //     data:this.yData
                  // }]
              });
              var _this=this
              window.addEventListener("resize",function(){
                  _this.myChart.resize();
              })
            }
        },
      }
    }
</script>

